<template>
  <div>
    <hzhy-data-table ref="dataTable" v-bind="tableConfigTask"></hzhy-data-table>
    <role-config-drawer
      v-if="roleConfigVisible"
      :visible.sync="roleConfigVisible"
      :curRowForm="currentRow"
      :confim="handleRoleConfigConfirm"
    ></role-config-drawer>
  </div>
</template>

<script>
import RoleConfigDrawer from '@/container/system/user/role-config-drawer'

import * as api from '@/const/api'

export default {
  title: '客户账户列表',
  name: 'CustomerList',
  components: {
    RoleConfigDrawer,
  },
  data() {
    return {
      roleConfigVisible: '',
      currentRow: {},
    }
  },
  computed: {
    tableConfigTask() {
      return {
        url: api.userPage,
        customQuery: {
          userType: 1,
        },
        columns: [
          {
            label: '序号',
            type: 'index',
            prop: 'index',
          },
          {
            label: '姓名',
            prop: 'name',
          },
          {
            label: '性别',
            prop: 'sex',
            formatter: ({ sex }) => (sex === 1 ? '男' : '女'),
          },
          {
            label: '邮箱',
            prop: 'accountEmail',
          },
          {
            label: '电话',
            prop: 'phone',
          },
          {
            label: '公司',
            prop: 'company',
          },
          {
            label: '国家/地区',
            prop: 'area',
          },
          {
            label: '垂直市场',
            prop: 'verticalMarket',
          },
          {
            label: '怎样找到',
            prop: 'howFind',
          },
          {
            label: '注册时间',
            prop: 'createTime',
          },
          {
            label: '操作',
            prop: 'operation',
            width: 160,
            fixed: 'right',
            setBtns: (row) => {
              const btns = [
                {
                  label: '分配角色',
                  handler: () => {
                    this.currentRow = row
                    this.roleConfigVisible = true
                  },
                },
                {
                  label: '重置密码',
                  handler: () => {
                    this.currentRow = row
                    this.resetPasswordVisible = true
                  },
                },
              ]
              return this.$ac.operationAccess(btns)
            },
          },
        ],
        searchForm: [
          {
            $type: 'input',
            $id: 'name',
            label: '邮箱',
            $el: {
              clearable: true,
              placeholder: '请输入',
            },
          },
        ],
      }
    },
  },
  methods: {
    // 角色分配
    async handleRoleConfigConfirm(data) {
      try {
        const params = { ...data }
        const { code, msg } = await this.$axios.$post(api.accountRoleRelation, params)
        if (+code !== 200) {
          throw new Error(msg || '操作失败')
        }
        this.$message.success('操作成功')
        this.$refs.dataTable.goPage() // 刷新界面
      } catch (err) {
        this.$message.error(err.message)
      }
    },
  },
}
</script>

<style lang="less" scoped></style>
